<template>
  <q-layout view="lHh Lpr lFf">
    <!-- Be sure to play with the Layout demo on docs -->
    <!-- (Optional) The Header -->
    <q-layout-header class="index row justify-center text-center">
      <div class="title">远程指挥</div>
      <q-btn class="bg-positive" @click="loginOut()">退出登陆</q-btn>
    </q-layout-header>

    <q-page-container>
      <!-- This is where pages get injected -->
      <router-view/>
    </q-page-container>
  </q-layout>
</template>

<script>
export default {
  name: 'MyLayout',
  data () {
    return {
      url: '../../../jsonGateway.php',
      loginOutPkg: {
        commonKey: 402,
        appKey: 2,
        userID: this.$q.cookies.get('userID'),
        sessionID: this.$q.cookies.get('sessionID'),
        data: {
          userID: this.$q.cookies.get('userID')
        }
      }
    }
  },
  methods: {
    loginOut () {
      this.$q.cookies.remove('userName')
      this.$q.cookies.remove('sessionID')
      this.$q.cookies.remove('userID')
      // clear setInterval
      this.$router.push('/login')
      this.backLoginOut()
    },
    async backLoginOut () {
      let me = this
      let pkg = new FormData()
      pkg.append('gdData', JSON.stringify(JSON.stringify(this.loginOutPkg)))
      const { data } = await this.$http({
        url: me.url,
        method: 'post',
        data: pkg,
        header: {
          Accept: '*/*',
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
          'X-Requested-With': 'XMLHttpRequest'
        }
      })
      if (data !== undefined) {
        this.$q.notify('登出成功！')
      }
    }
  }
}
</script>

<style lang="stylus">
@import ('~variables');

.index {
  .title {
    width: 20vw;
    background-color: $mediumSpringGreen;
    font-size: 1em;
    line-height: 38px;
  }

  background-color: $deepGreen;
  color: $neutral;

  .q-btn {
    position: absolute;
    right: 1%;
  }
}
</style>
